﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Exam.aspx.cs" Inherits="Corsat.Web._2013.Exam" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Online Exam</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="Styles/normalize.css">
    <link rel="stylesheet" href="Styles/main.css">
    <link rel="stylesheet" href="Styles/jquery.steps.css">
    <link href="libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="Styles/flipclock.css">
    <script src="Scripts/modernizr-2.6.2.min.js"></script>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/jquery.cookie-1.3.1.js"></script>
    <script src="libs/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <script src="Scripts/jquery.steps.js"></script>
    <script src="Scripts/flipclock.js"></script>
    <style type="text/css">
        .answersRadioList input
        {
            float: right;
            margin-left: 8px;
        }
        
        .wizard > .steps > ul > li
        {
            width: 27px;
            font-size: 14px;
            line-height: 15px;
            margin:4px;
        }
        .wizard > .steps a, .wizard > .steps a:hover, .wizard > .steps a:active
        {
            margin:0px;
            padding:3px !important; 
            display:block;
            text-align:center;
        }
        
        .wizard > .content
        {
            min-height: 23em;
        }
        label {
    font-size: 20px;
}
    </style>
</head>
<body>
    <div id="resultMessage" class="modal hide fade in">
        <div class="modal-header" dir="rtl">
            <a class="close" data-dismiss="modal" style="float: left">×</a>
            <h3>
                النتيجة</h3>
        </div>
        <div class="modal-body" dir="rtl">
            <h4>
                <p id="txtMessage">
                </p>
            </h4>
        </div>
        <div class="modal-footer">
            <%--    <a href="#" class="btn btn-primary" style="color: white">Call to action</a> --%>
            <a href="#" class="btn" data-dismiss="modal">إغلاق</a>
        </div>
    </div>
    <div id="confirmMessage" class="modal hide fade in">
        <div class="modal-header" dir="rtl">
            <a class="close" data-dismiss="modal" style="float: left">×</a>
            <h3>
                تأكيد إنهاء الإجابة</h3>
        </div>
        <div class="modal-body" dir="rtl">
            <h4>
                <p id="P1">
                    هل تريد إنهاء الإجابة؟
                </p>
            </h4>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn btn-primary" style="color: white" onclick="saveResults();">انهاء
                الإجابة</a> <a href="#" class="btn" data-dismiss="modal">إغلاق</a>
        </div>
    </div>
    <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->
    <header>
            <%--<h1>Wizard Demo</h1>--%>
        </header>
    <div class="content">
        <%--  <h1>
            Basic Demo</h1>--%>
        <script>

            function saveResults() {

                $('#confirmMessage').modal('hide');

                var answers = [];
                $(".answersRadioList input[type='radio']:checked").each(
                            function (index, item) {
                                var answerObj = { "AnswerId": item.value, "QuestionId": $("#" + item.id).closest(".answersRadioList").attr('questionId') };
                                answers.push(answerObj);
                            });

                var courseId = $('#<% Response.Write(hdnSelectedCourseId.ClientID); %>').val();
                var accountId = $('#<% Response.Write(hdnAccountId.ClientID); %>').val();
                var count = $('#<% Response.Write(hdnCount.ClientID); %>').val();
                $.ajax({
                    type: "POST",
                    url: "Exam.aspx/Save",
                    data: JSON.stringify({ answers: answers, courseId: courseId, accountId: accountId, count: count }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        if (msg.d != -1) {
                            $('#txtMessage').html(msg.d);
                            $('#resultMessage').modal('show');
                            //alert(msg.d);
                            //getAccountData();
                            setTimeout(function () {
                                location.href = "Profile.aspx";
                                return true;
                            }, 5000);
                        } else {
                            $('#txtMessage').html('حدث خطأ ما , لم يتم الحفظ');
                            $('#resultMessage').modal('show');
                            //alert('حدث خطأ ما , لم يتم الحفظ');    
                        }
                    }
                });
            }

            var clock;

            $(function () {

                $("#wizard").steps({
                    headerTag: "h2",
                    bodyTag: "section",
                    transitionEffect: "slideLeft",

                    onFinishing: function (event, currentIndex) {
                        $('#confirmMessage').modal('show');
                    },
                    onFinished: function (event, currentIndex) {
                        alert('تم الأجابة بنجاح ');
                    },
                    onStepChanged: function (event, currentIndex, priorIndex) {
                        //debugger;

                        if ($("#wizard-p-" + priorIndex).children(".sectionDiv").children(".answersRadioList").find("input[type='radio']:checked").length == 0) {
                            $("#wizard-t-" + priorIndex).parent().addClass("error");
                        }
                        return true;
                    },
                    //forceMoveForward:true,
                    enableAllSteps: true,
                    titleTemplate: '<span class="number">#index#</span>',
                    labels: {
                        finish: "إنهاء الأجابه",
                        next: "التالي",
                        previous: "السابق"
                    }
                });
                //$(".steps").hide();
                $('a[href$="#previous"]').hide();

                clock = $('.clock').FlipClock(2701, {
                    clockFace: 'MinuteCounter',
                    countdown: true,
                    callbacks: {
                        stop: function () {
                            //$('.message').html('The clock has stopped!');
                            saveResults();
                        }
                    }
                });

            });
        </script>
        <form runat="server">
        <asp:HiddenField runat="server" ID="hdnSelectedCourseId" />
        <asp:HiddenField runat="server" ID="hdnAccountId" />
        <asp:HiddenField runat="server" ID="hdnCount" />
        <div style="font-size: 30px; text-align: center; direction: rtl">
            <br />
            <span>امتحان كورس </span>
            <br />
            <br />
            <span>
                <asp:Label ID="course_lbl" runat="server" Text="Label"></asp:Label></span>
        </div>
        <br />
        <div class="clock" style="margin: 2em; position:absolute;top:15px;left:20px;">
        </div>
        <br />
            <div style="margin-top:20px;clear:both;">&nbsp;</div>
        <div id="wizard" >
            <asp:Repeater runat="server" ID="questionRepeater">
                <ItemTemplate>
                    <h2>
                    </h2>
                    <section>
                        <div style="font-size: 20px ;direction:rtl;" class="sectionDiv" >
                        <asp:Label ID="lblUser" runat="server" Font-Bold="true" Text='<%#Eval("Text") %>'/>
                        
                <asp:RadioButtonList questionId='<%#Eval("QuestionId") %>' DataTextField="AnswerText" DataValueField="AnswerId" runat="server" DataSource='<%# Eval("Answers") %>' ID="radios"
                 CssClass="answersRadioList">
                </asp:RadioButtonList>
                </div>
                    </section>
                </ItemTemplate>
            </asp:Repeater>
        </div>
        </form>
    </div>
</body>
</html>
